<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用5种方法写布局</title>
    <style media="screen">
        html * {
            padding: 0;
            margin: 0;
        }

        .wrap div {

        }

        .table-row {
            display: table-row;
        }
        .table-cell {
            display: table-cell;
        }
    </style>
</head>
<body>
<p>高度自适应，请写出三栏布局，其中左栏，右栏宽度各300px,中间自适应</p>
<p>方法1：table布局,特点，给定一个随便的高度，内容超出后，tabel-cell会自动撑开表格，min-height无效,此布局兼容性很好</p>
<hr style="margin-bottom: 20px">
<section>
    <style>
        .wrap.table {
            display: table;
            width: 100%;
        }

        .wrap.table .left, .wrap.table .right {
            width: 300px;
            background-color: red;
        }
    </style>
    <article class="wrap table">
        <div class="left  table-cell">1111</div>
        <div class="center table-cell">
            <p>高度自适应，请写出三栏布局，其中左栏，右栏宽度各300px,中间自适应</p>
            <p>高度自适应，请写出三栏布局，其中左栏，右栏宽度各300px,中间自适应</p>
            <p>高度自适应，请写出三栏布局，其中左栏，右栏宽度各300px,中间自适应</p>
        </div>
        <div class="right table-cell">222</div>

    </article>
</section>
<br>

<p>方法2：float布局,特点，此布局兼容性很好,需要清除浮动</p>
<hr style="margin-bottom: 20px">
<section>
    <style media="screen">
        .wrap.float::after {
            /*overflow: hidden;*/
            content: '';
            clear: both;
        }
        .wrap.float .left, .wrap.float .right {
            width: 300px;
            background-color: red;
        }
        .wrap.float .left{
            float: left;
        }
        .wrap.float .right{
            float: right;
        }
        .wrap.float .center{
           margin: 0 300px;
        }
    </style>
    <article class="wrap float">
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
        </div>
        <div class="center">
            <p>高度自适应，请写出三栏布局，其中左栏，右栏宽度各300px,中间自适应</p>
        </div>
    </article>
</section>
<br>

<p>方法3：定位布局,特点，兼容性比较差,实现较为方便</p>
<hr style="margin-bottom: 20px">
<section>
    <style media="screen">
        .wrap.position {
            position: relative;
        }
        .wrap.position .left, .wrap.position .right {
            width: 300px;
            background-color: red;
            position: absolute;
            top: 0;
        }
        .wrap.position .left{
           left: 0;
        }
        .wrap.position .right{
            right: 0;
        }
        .wrap.position .center{
            margin: 0 300px;
        }
    </style>
    <article class="wrap position">
        <div class="left">left</div>
        <div class="center">
            <p>高度自适应，请写出三栏布局，其中左栏，右栏宽度各300px,中间自适应</p>
        </div>
        <div class="right">right</div>
    </article>
</section>

<br>
<p>方法4：flex布局,特点，兼容性比较差,实现较为方便,特别是移动端，非常适合</p>
<hr style="margin-bottom: 20px">
<section>
    <style media="screen">
        .wrap.flex {
            display: flex;
            flex-direction: row;
        }
        .wrap.flex .left, .wrap.flex .right {
            width: 300px;
            background-color: red;
        }
        .wrap.flex .center{
           flex: 1;
        }
    </style>
    <article class="wrap flex">
        <div class="left"></div>
        <div class="center">
            <p>高度自适应，请写出三栏布局，其中左栏，右栏宽度各300px,中间自适应</p>
        </div>
        <div class="right"></div>
    </article>
</section>

<br>
<p>方法5：网格布局,特点，兼容性比较差,实现较为方便,特别是移动端，非常适合</p>
<hr style="margin-bottom: 20px">
<section>
    <style media="screen">
        .wrap.grid {
            display: grid;
            width: 100%;
            grid-template-columns: 300px auto 300px;
        }
        .wrap.grid .left,.wrap.grid .right{
            background-color: red;
        }
        .wrap.grid .left{
            background: url("./panda.jpg")center no-repeat;
            background-size: cover;
        }

    </style>
    <article class="wrap grid">
        <div class="left"></div>
        <div class="center" style="text-align: center">
            <p>高度自适应，请写出三栏布局，其中左栏，右栏宽度各300px,中间自适应</p>
            <p>高度自适应，请写出三栏布局，其中左栏，右栏宽度各300px,中间自适应</p>
            <p>高度自适应，请写出三栏布局，其中左栏，右栏宽度各300px,中间自适应</p>
        </div>
        <div class="right"></div>
    </article>
</section>

</body>
</html>